---
// Component for displaying user feedback testimonials
---

<section class="feedback-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">What Developers Say</h2>
      <p class="section-description">
        Real feedback from developers using Reatom in production
      </p>
    </div>

    <div class="feedback-grid">
      <!-- Feedback Card 1 - kasperskei -->
      <div class="feedback-card">
        <div class="feedback-header">
          <img alt="" class="author-avatar" src="https://github.com/kasperskei.png">
          <div class="author-info">
            <h3 class="author-name">kasperskei</h3>
            <p class="author-role">Senior Developer</p>
          </div>
        </div>
        <div class="feedback-content">
          <p>
            "Reatom has been my primary tool for over a year now. Its flexible
            reactive primitives allow for concise, readable, and maintainable
            code, while offering maximum control with minimal effort. <strong
              >Perfect fit for interacting with external APIs.</strong
            >"
          </p>
          <p class="feedback-highlight">
            "The integration with @reatom/jsx works exceptionally well for
            Telegram Mini Apps, browser extensions, and embedded widgets."
          </p>
        </div>
        <div class="feedback-footer">
          <div class="feedback-rating">
            <span class="stars">★★★★★</span>
          </div>
        </div>
      </div>

      <!-- Feedback Card 2 - AgarkovRoman -->
      <div class="feedback-card">
        <div class="feedback-header">
          <img alt="" class="author-avatar" src="https://github.com/AgarkovRoman.png">
            
          <div class="author-info">
            <h3 class="author-name">AgarkovRoman</h3>
            <p class="author-role">Full-Stack Developer</p>
          </div>
        </div>
        <div class="feedback-content">
          <p>
            "One of the biggest strengths of Reatom is that it's not tied to any
            specific UI framework. This makes it easy to keep logic outside
            components, resulting in <strong
              >simpler components and more testable overall code.</strong
            >"
          </p>
          <p class="feedback-highlight">
            "Some features that are quite tricky to implement with other
            libraries are surprisingly easy with Reatom. Incredibly powerful."
          </p>
        </div>
        <div class="feedback-footer">
          <div class="feedback-rating">
            <span class="stars">★★★★★</span>
          </div>
        </div>
      </div>

      <!-- Feedback Card 3 - Aetet -->
      <div class="feedback-card">
        <div class="feedback-header">
          <img alt="" class="author-avatar" src="https://github.com/Aetet.png">
            
          <div class="author-info">
            <h3 class="author-name">Aetet</h3>
            <p class="author-role">Frontend Developer</p>
          </div>
        </div>
        <div class="feedback-content">
          <p>
            "Used it for a small internal project. The approach felt unusual
            after working with Redux and MobX, but I decided to give it a
            chance. Using actions instead of reducers cuts out a lot of
            boilerplate. Computed atoms replace selectors nicely. I really like
            the auto type inference—it's a huge help during refactoring. <strong
              >Feels like magic, honestly.</strong
            >"
          </p>
          <p class="feedback-highlight">
            "My advice for new adopters: spend 2–3 days exploring the library
            and getting a feel for the philosophy of atomization."
          </p>
        </div>
        <div class="feedback-footer">
          <div class="feedback-rating">
            <span class="stars">★★★★★</span>
          </div>
        </div>
      </div>

      <!-- Feedback Card 4 - Empty Placeholder -->
      <div class="feedback-card feedback-card-empty">
        <div class="feedback-placeholder">
          <div class="placeholder-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
              <path d="M5 12h14"/>
              <path d="M12 5v14"/>
            </svg>
          </div>
          <h3>Your Feedback</h3>
          <p>
            Share your experience with Reatom and help others discover its
            power.
          </p>
          <a
            href="https://github.com/reatom/reatom/issues/1093"
            class="cta-link"
            target="_blank"
            rel="noopener noreferrer"
          >
            Leave Feedback
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Community Stats -->
    <div class="community-stats">
      <div class="stat-item">
        <span class="stat-number">1.2k+</span>
        <span class="stat-label">GitHub Stars</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">80+</span>
        <span class="stat-label">Contributors</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">5+</span>
        <span class="stat-label">Years Active</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">1000+</span>
        <span class="stat-label">Happy Devs</span>
      </div>
    </div>
  </div>
</section>

<style>
  .feedback-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }

  .feedback-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
  }

  .section-header {
    text-align: center;
    margin-bottom: 80px;
  }

  .section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 24px;
    line-height: 1.2;
    transition: background 0.3s ease;
  }

  .section-description {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    transition: color 0.3s ease;
  }

  .feedback-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 80px;
  }

  @media (min-width: 768px) {
    .feedback-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .feedback-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .feedback-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
      90deg,
      var(--signal-color),
      var(--forms-color),
      var(--framework-color)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .feedback-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3);
    border-color: var(--border-color);
  }

  .feedback-card:hover::before {
    opacity: 1;
  }

  .feedback-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
  }

  .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      var(--signal-color),
      var(--forms-color)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    transition: background 0.3s ease;
  }

  .author-initial {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
  }

  .author-name {
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 4px;
    transition: color 0.3s ease;
  }

  .author-role {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
    transition: color 0.3s ease;
  }

  .feedback-content {
    margin-bottom: 24px;
  }

  .feedback-content p {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 16px;
    transition: color 0.3s ease;
  }

  .feedback-content strong {
    color: var(--text-secondary);
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .feedback-highlight {
    background: color-mix(in srgb, var(--accent-primary), transparent 92%);
    border-left: 3px solid var(--accent-primary);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
  }

  .feedback-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stars {
    color: var(--accent-primary);
    font-size: 1.125rem;
    transition: color 0.3s ease;
  }

  /* Empty Placeholder Card */
  .feedback-card-empty {
    background: linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.1),
      rgba(168, 85, 247, 0.1)
    );
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    transition: all 0.3s ease;
  }

  .feedback-placeholder {
    text-align: center;
    max-width: 240px;
  }

  .placeholder-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }

  .feedback-placeholder h3 {
    color: var(--text-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    transition: color 0.3s ease;
  }

  .feedback-placeholder p {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
    transition: color 0.3s ease;
  }

  .cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .cta-link:hover {
    color: var(--accent-secondary);
  }

  .cta-link svg {
    width: 16px;
    height: 16px;
  }

  /* Community Stats */
  .community-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding: 40px 0;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
  }

  @media (min-width: 768px) {
    .community-stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .stat-item {
    text-align: center;
  }

  .stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--accent-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 8px;
    transition: background 0.3s ease;
  }

  .stat-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
  }

  /* Light theme specific adjustments */
  html[data-theme='light'] .feedback-section {
    background: var(--bg-primary);
  }

  html[data-theme='light'] .feedback-card:hover {
    box-shadow: 0 32px 64px rgba(21, 17, 52, 0.15);
  }


  html[data-theme='light'] .feedback-card-empty {
    background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.05),
      rgba(124, 58, 237, 0.05)
    );
  }

  /* Mobile Responsiveness */
  @media (max-width: 767px) {
    .feedback-section {
      padding: 80px 0;
    }

    .container {
      padding: 0 16px;
    }

    .section-header {
      margin-bottom: 60px;
    }

    .feedback-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: 60px;
    }

    .feedback-card {
      padding: 24px;
    }

    .community-stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .stat-number {
      font-size: 2rem;
    }
  }
</style>
